<template>
  <view class="page custom-page">
    <custom-head gradient back title="库存记录"></custom-head>

    <view class="content">
      <view v-for="(item) in stockRecordingList" class="stockItem">
        <view v-if="item.cnt > 0" class="flex">
          <view class="font_32"><u-icon class="blue icon" name="plus-circle"></u-icon> 增加库存</view>
          <view class="font_28 blue">+ {{ item.cnt }}/套</view>
        </view>
        <view v-else class="flex">
          <view class="font_32"> <u-icon class="red icon" name="minus-circle"></u-icon> 减少库存</view>
          <view class="font_28 red">{{ item.cnt }}/套</view>
        </view>

        <view class="flex font_24 m_top_12" >
          <view>进货</view>
          <view>{{ item.created_at }}</view>
        </view>


      </view>
    </view>

  </view>
</template>
<script>
import { getPresent_history } from '../../api/modules/present_history';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      stockRecordingList: []
    }
  },


  mounted() {
    this._getPresent_history()
  },

  methods: {
   _getPresent_history() {
    getPresent_history({
      page_no: 1,
      page_size: 10000
    }).then((res) => {
      console.log('res--', res)
      const { code, data } = res || {}
      if (code === 200) {
        this.stockRecordingList = data.list.map(i => ({...i, created_at: dayjs(i.created_at).format('MM/DD HH:mm:ss')})).filter(i => i.sid === this.glbId)
      }
    })
   }
  }
}
</script>
<style scoped lang="scss">
.page {
  height: 100vh;
}
.content {
  padding: 20rpx;
  .stockItem {
    width: 100%;
    height: 128rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 24rpx 12rpx 17rpx 23rpx;
    border-radius: 8rpx;

    .flex {
      display: flex;
      justify-content: space-between;
    }
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 2rpx;
    }
    .font_32 {
        font-size: 32rpx;
      }
      .font_28 {
        font-size: 28rpx;
      }
      .font_24 {
        font-size: 24rpx;
      }

      .m_top_12 {
        margin-top: 12rpx;
      }

      .red {
        color: #F84638;
      }

      .blue {
        color: #2979FF;
      }
  }
}
</style>
